<template>
  <div class="csign-container">
    <!-- 页面标题区域 - 玻璃拟态效果 -->
    <div class="page-header">
      <h2 class="page-title">知识搜索</h2>
      <div class="breadcrumb">首页 / 知识管理 / 知识搜索</div>
    </div>

    <!-- 搜索卡片 -->
    <div class="search-card">
      <div class="search-form">
        <!-- 主题内容搜索 -->
        <div class="search-item">
          <label class="search-label">主题内容</label>
          <el-input 
            v-model="page.theme" 
            placeholder="请输入" 
            clearable 
            class="input-search"
            prefix-icon="el-icon-search"
          />
        </div>

        <!-- 适用病种选择 -->
        <div class="search-item">
          <label class="search-label">适用病种</label>
          <el-select 
            v-model="page.entity" 
            placeholder="全部" 
            class="select-search"
            clearable
          >
            <el-option label="全部" value="" />
            <el-option label="高血压" value="高血压" />
            <el-option label="糖尿病" value="糖尿病" />
            <el-option label="慢阻肺" value="慢阻肺" />
          </el-select>
        </div>

        <!-- 搜索操作按钮 -->
        <div class="search-actions">
          <el-button type="primary" @click="handleSearch" class="search-btn">
            <el-icon><Search /></el-icon> 查询
          </el-button>
          <el-button @click="resetSearch" class="reset-btn">
            <el-icon><RefreshRight /></el-icon> 重置
          </el-button>
        </div>
      </div>
    </div>

    <!-- 主题标签筛选 -->
    <div class="tags-filter-container">
      <div class="tags-title">主题标签:</div>
      <div class="tags-wrapper">
        <!-- "全部" 标签 -->
        <el-tag
          :type="activeTag === '全部' ? 'primary' : 'info'"
          effect="plain"
          @click="filterByTag('全部')"
          class="filter-tag"
        >
          全部
        </el-tag>
        
        <!-- 病种标签 -->
        <el-tag
          v-for="tag in diseaseTags"
          :key="tag"
          :type="activeTag === tag ? 'primary' : 'info'"
          effect="plain"
          @click="filterByTag(tag)"
          class="filter-tag"
        >
          {{ tag }}
        </el-tag>
      </div>
    </div>

    <!-- 数据卡片和表格 -->
    <div class="data-card">
      <!-- 卡片头部 -->
      <div class="card-header">
        <h3 class="card-title">知识列表</h3>
        <div class="card-stats">共 {{ page.totalCount }} 条记录</div>
      </div>
      
      <!-- 表格 -->
      <el-table
        :data="tableData"
        style="width: 100%;"
        v-loading="loading"
        element-loading-text="正在加载数据..."
      >
        <el-table-column prop="theme" label="主题" min-width="280" />
        <el-table-column prop="entity" label="适用病种" width="140">
          <template #default="{ row }">
            <el-tag :type="getEntityTagType(row.entity)" effect="light" class="entity-tag">
              {{ row.entity }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="knowledgeTime" label="创建日期" width="180" />
        <el-table-column prop="knowledgeopen" label="是否公开" width="120">
          <template #default="{ row }">
            <el-tag :type="row.knowledgeopen === 1 ? 'success' : 'info'" effect="light" class="status-tag">
              {{ row.knowledgeopen === 1 ? '公开' : '不公开' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100" fixed="right">
          <template #default="{ row }">
            <el-button type="primary" link @click="handleView(row)" class="view-btn">
              查看
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
          v-model:current-page="page.pageIndex"
          v-model:page-size="page.pageSize"
          :page-sizes="[5, 10, 15, 20]"
          :total="page.totalCount"
          layout="sizes, prev, pager, next, jumper"
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>

    <!-- 知识详情弹窗 -->
    <el-dialog 
      v-model="detailVisible" 
      title="知识详情" 
      width="800px" 
      class="knowledge-detail-dialog"
      destroy-on-close
    >
      <div class="detail-content">
        <div class="detail-item">
          <label class="detail-label">主题:</label>
          <div class="detail-value">{{ detailData.theme }}</div>
        </div>
        
        <div class="detail-item">
          <label class="detail-label">适用病种:</label>
          <el-tag 
            :type="getEntityTagType(detailData.entity)" 
            effect="light" 
            class="detail-entity-tag"
          >
            {{ detailData.entity }}
          </el-tag>
        </div>
        
        <div class="detail-item">
          <label class="detail-label">是否公开:</label>
          <el-tag 
            :type="detailData.knowledgeopen === 1 ? 'success' : 'info'" 
            effect="light" 
            class="detail-status-tag"
          >
            {{ detailData.knowledgeopen === 1 ? '公开' : '不公开' }}
          </el-tag>
        </div>
        
        <div class="detail-item">
          <label class="detail-label">创建日期:</label>
          <div class="detail-value">{{ detailData.knowledgeTime }}</div>
        </div>
        
        <div class="detail-item full-width">
          <label class="detail-label">详细内容:</label>
          <div 
            class="detail-content-html" 
            v-html="detailData.upd || '暂无详细内容'"
          ></div>
        </div>
      </div>
      
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="detailVisible = false" class="close-btn">关闭</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { Search, RefreshRight } from '@element-plus/icons-vue'
import axios from 'axios'
import { ElMessage } from 'element-plus'

// 表格数据
const tableData = ref([])

// 加载状态
const loading = ref(false)

// 分页参数
const page = ref({
  totalCount: 0,
  totalPage: 0,
  pageIndex: 1,
  pageSize: 10,
  theme: '',
  entity: '',
  knowledgeStatus: ''
})

// 主题标签
const diseaseTags = ['高血压', '糖尿病', '慢阻肺']
const activeTag = ref('全部')

// 详情弹窗
const detailVisible = ref(false)
const detailData = ref({
  id: null,
  theme: '',
  entity: '',
  knowledgeopen: 0,
  knowledgeTime: '',
  upd: ''
})

// 获取病种标签类型
const getEntityTagType = (entity) => {
  const typeMap = {
    '高血压': 'danger',
    '糖尿病': 'warning',
    '慢阻肺': 'primary'
  }
  return typeMap[entity] || 'info'
}

// 获取数据
const list = () => {
  loading.value = true
  axios.get("http://localhost:5108/api/Manager/KnowledgeShow", { 
    params: page.value 
  }).then(res => {
    if (res.data && res.data.data) {
      // 确保包含 upd 字段用于详情
      tableData.value = (res.data.data.data || []).map(item => ({
        ...item,
        upd: item.upd || item.content || ''
      }))
      page.value.totalCount = res.data.data.totalCount || 0
      page.value.totalPage = res.data.data.totalPage || 0
    }
  }).catch(err => {
    console.error('请求失败:', err)
    ElMessage.error('获取数据失败，请稍后重试')
  }).finally(() => {
    loading.value = false
  })
}

// 点击标签筛选
const filterByTag = (tag) => {
  activeTag.value = tag
  page.value.entity = tag === '全部' ? '' : tag
  page.value.pageIndex = 1
  list()
}

// 手动搜索
const handleSearch = () => {
  page.value.pageIndex = 1
  list()
}

// 重置搜索
const resetSearch = () => {
  page.value.theme = ''
  page.value.entity = ''
  activeTag.value = '全部'
  page.value.pageIndex = 1
  list()
}

// 查看详情
const handleView = (row) => {
  // 直接使用表格中的数据（无需额外请求）
  detailData.value = {
    id: row.id,
    theme: row.theme || '',
    entity: row.entity || '',
    knowledgeopen: row.knowledgeopen || 0,
    knowledgeTime: row.knowledgeTime || '',
    upd: row.upd || row.content || ''
  }
  detailVisible.value = true
}

// 分页变化
const handleSizeChange = (size) => {
  page.value.pageSize = size
  list()
}

const handleCurrentChange = (currentPage) => {
  page.value.pageIndex = currentPage
  list()
}

// 初始化加载
list()
</script>

<style scoped>
/* 全局样式 */
.csign-container {
  padding: 20px;
  background: linear-gradient(135deg, #f5f7fa 0%, #e9ecef 100%);
  min-height: 100vh;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* 页面标题区域 - 玻璃拟态效果 */
.page-header {
  margin-bottom: 28px;
  padding: 20px 28px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px);
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 6px 24px rgba(31, 38, 135, 0.06);
  transition: all 0.3s ease;
}

.page-header:hover {
  box-shadow: 0 8px 30px rgba(31, 38, 135, 0.08);
}

.page-title {
  margin: 0 0 10px 0;
  font-size: 26px;
  font-weight: 700;
  color: #0056b3;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, #0056b3, #007bff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.breadcrumb {
  font-size: 13px;
  color: #6c757d;
  font-weight: 500;
}

/* 搜索卡片 - 现代卡片设计 */
.search-card {
  background: white;
  border-radius: 14px;
  margin-bottom: 24px;
  border: 1px solid #e9ecef;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

.search-card:hover {
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
}

/* 搜索表单布局 */
.search-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  padding: 22px;
}

.search-item {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.search-label {
  font-size: 13px;
  color: #495057;
  font-weight: 600;
  white-space: nowrap;
  min-width: fit-content;
}

/* Element UI输入框样式覆盖 */
:deep(.el-input__inner) {
  border-radius: 8px !important;
  border: 1px solid #ced4da !important;
  transition: all 0.2s;
}

:deep(.el-input__inner:hover) {
  border-color: #007bff !important;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1) !important;
}

:deep(.el-input__inner:focus) {
  border-color: #0056b3 !important;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25) !important;
}

.select-search, .input-search {
  width: 240px;
}

:deep(.el-input__prefix-icon) {
  color: #adb5bd;
}

/* 搜索操作按钮组 */
.search-actions {
  display: flex;
  gap: 12px;
}

/* 按钮样式 - 现代化设计 */
.search-btn, .reset-btn, .view-btn {
  border-radius: 8px;
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.search-btn {
  background: linear-gradient(135deg, #0056b3 0%, #007bff 100%);
  color: white;
}

.search-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0, 123, 255, 0.35);
}

.reset-btn {
  background: #f8f9fa;
  color: #495057;
  border: 1px solid #dee2e6;
}

.reset-btn:hover {
  transform: translateY(-1px);
  background: #e9ecef;
  box-shadow: 0 4px 10px rgba(73, 80, 87, 0.15);
}

.view-btn {
  font-weight: 500;
  transition: all 0.3s ease;
}

.view-btn:hover {
  color: #0056b3;
}

/* 标签筛选区域 */
.tags-filter-container {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 12px;
}

.tags-title {
  font-size: 14px;
  font-weight: 600;
  color: #495057;
  white-space: nowrap;
}

.tags-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.filter-tag {
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 16px;
  padding: 4px 12px;
  font-size: 13px;
}

.filter-tag:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 123, 255, 0.2);
}

/* 标签选中样式 */
:deep(.el-tag--primary.el-tag--plain) {
  background-color: #007bff;
  color: white;
  border-color: #007bff;
}

/* 数据卡片 - 高级卡片设计 */
.data-card {
  background: white;
  border-radius: 14px;
  border: 1px solid #e9ecef;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

.data-card:hover {
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
}

/* 卡片头部 */
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 22px 16px;
  border-bottom: 1px solid #f1f3f4;
}

.card-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #003d79;
}

.card-stats {
  color: #64748b;
  font-size: 14px;
}

/* 表格样式 */
:deep(.el-table) {
  border-radius: 0 0 14px 14px;
  overflow: hidden;
}

:deep(.el-table__header) {
  background: linear-gradient(90deg, #007bff 0%, #0056b3 100%);
}

:deep(.el-table__header th) {
  background: transparent !important;
  color: white;
  font-weight: 600;
  border-bottom: none;
  padding: 12px 8px;
  font-size: 14px;
}

:deep(.el-table__row) {
  transition: all 0.2s ease;
}

:deep(.el-table__row:hover) {
  background-color: #f8f9fa !important;
}

/* 标签样式 */
.entity-tag,
.status-tag {
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 12px;
  font-weight: 500;
  transition: all 0.3s ease;
}

/* 分页区域 */
.pagination-container {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 16px 20px;
  border-top: 1px solid #e2e8f0;
  background-color: #fafafa;
}

/* 知识详情弹窗样式 */
:deep(.knowledge-detail-dialog .el-dialog__header) {
  padding: 20px 24px;
  border-bottom: 1px solid #e9ecef;
}

:deep(.knowledge-detail-dialog .el-dialog__title) {
  font-size: 18px;
  font-weight: 600;
  color: #003d79;
}

:deep(.knowledge-detail-dialog .el-dialog__body) {
  padding: 0 24px 20px;
}

.detail-content {
  padding: 20px 0;
}

.detail-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 16px;
  gap: 12px;
}

.detail-item.full-width {
  flex-direction: column;
  align-items: flex-start;
}

.detail-label {
  font-size: 14px;
  font-weight: 600;
  color: #495057;
  min-width: 80px;
  white-space: nowrap;
}

.detail-value {
  font-size: 14px;
  color: #212529;
  line-height: 1.5;
  flex: 1;
}

/* 详情标签样式 */
.detail-entity-tag,
.detail-status-tag {
  font-size: 12px;
  padding: 4px 12px;
  border-radius: 16px;
  font-weight: 500;
}

/* 详细内容HTML样式 */
.detail-content-html {
  font-size: 14px;
  line-height: 1.6;
  color: #212529;
  background: #f8f9fa;
  padding: 16px;
  border-radius: 8px;
  border: 1px solid #e9ecef;
  min-height: 100px;
  width: 100%;
}

.detail-content-html p {
  margin: 0 0 12px 0;
  line-height: 1.6;
}

.detail-content-html h1,
.detail-content-html h2,
.detail-content-html h3 {
  color: #0056b3;
  margin: 16px 0 12px 0;
  font-weight: 600;
}

.detail-content-html ul,
.detail-content-html ol {
  margin: 12px 0;
  padding-left: 24px;
}

.detail-content-html li {
  margin-bottom: 8px;
  line-height: 1.5;
}

/* 关闭按钮样式 */
.close-btn {
  border-radius: 8px;
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 600;
  background: #f8f9fa;
  color: #495057;
  border: 1px solid #dee2e6;
  transition: all 0.3s ease;
}

.close-btn:hover {
  background: #e9ecef;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(73, 80, 87, 0.15);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .csign-container {
    padding: 12px;
  }
  
  .page-header {
    padding: 16px 20px;
    margin-bottom: 20px;
  }
  
  .page-title {
    font-size: 22px;
  }
  
  .search-form {
    gap: 16px;
    padding: 18px;
  }
  
  .select-search, .input-search {
    width: 100%;
    max-width: 240px;
  }
  
  .search-actions {
    width: 100%;
    justify-content: flex-start;
    margin-top: 8px;
  }
  
  .tags-filter-container {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}
</style>